<!-- Dom模板 -->
<template>
  <div class="music-boxes">
    <!-- Dom内容 -->
    <div class="music-box">
      <div class="music-main">
        <div class="music-main-img">
          <img :src="$store.state.bags.bookItem.book_img_url" alt="" />
          <h3>
            0{{ $store.state.bags.bookCatalog[musicIndex].diversityname }}
            {{ $store.state.bags.bookCatalog[musicIndex].diversitynametext }}
          </h3>
          <h6>{{ $store.state.bags.bookItem.name }}</h6>
        </div>
        <div class="music-main-xuan">
          <p
            :class="
              $store.state.bags.scFlag &&  this.scnum
                ? 'iconfont icon-xin1'
                : 'iconfont icon-xin'
            "
            @click="xzn"
            :style="
              $store.state.bags.scFlag &&  this.scnum
                ? { color: 'red' }
                : { color: 'white' }
            "
          ></p>
          <p class="iconfont icon-headset"></p>
          <p class="iconfont icon-changpian"></p>
          <p class="iconfont icon-zhizhangzhangdan"></p>
          <p class="iconfont icon-shenglvehao"></p>
        </div>
        <div class="music-jindu">
          <!-- $store.state.bags.bookCatalog[musicIndex].book_text_url -->
          <audio
            :src="$store.state.bags.bookCatalog[musicIndex].book_text_url"
            ref="music"
            @play="bofang"
            @pause="zanting"
            @canplay="getAudio"
            @ended="jieshu"
            class="musicyin"
          ></audio>
          <div class="music-row">
            <p class="start" ref="start"></p>
            <div class="row-alive" ref="row-alive">
              <p class="tiao" ref="tiao"></p>
              <div class="tiaodong" ref="tiaodong"></div>
              <p
                class="music-time"
                ref="dong"
                @touchstart="startdong"
                @touchend="enddong"
                @touchmove="ladong"
              ></p>
            </div>
            <p class="end" ref="end"></p>
          </div>
        </div>

        <div class="music-add-peomise">
          <p class="iconfont icon-yinleliebiao1" @click="showPopup"></p>
          <p @click="provet" class="iconfont icon-xiayishou"></p>
          <p
            @click="bof"
            :class="
              fangFlag
                ? 'iconfont icon-zhengzaibofang'
                : 'iconfont icon-bofang3'
            "
          ></p>
          <p @click="next" class="iconfont icon-xiayishou"></p>
          <p class="lastping">评论</p>
        </div>
        <div class="author-box">
          <div class="author-box-row">
            <div class="author-row-top">
              <div class="author-row-top-img">
                <img :src="$store.state.bags.bookItem.user_img" alt="" />
              </div>
              <div class="author-row-main-xin">
                <h3>{{ $store.state.bags.bookItem.name }}</h3>
                <p>网络小说作家,一个幽默...</p>
              </div>
              <button @click="guanzhu" ref="contact" class="contact">
                关注
              </button>
              <button @click="noguanzhu" ref="nocontact" class="nocontact">
                已关注
              </button>
            </div>
            <div class="row-flex-xin">
              <li>
                <p>3</p>
                <p>评论</p>
              </li>
              <li>
                <p>29.4 w</p>
                <p>粉丝</p>
              </li>
              <li>
                <p>128.3 w</p>
                <p>总订阅量</p>
              </li>
            </div>
            <div class="author-row1-alive">
              <div class="author-row1-alive-dong">
                <div
                  class="author-some-book"
                  v-for="(item, index) in goodBook"
                  :key="index"
                >
                  <img :src="item.book_img_url" alt="" />
                  <h4>{{ item.bookname }}</h4>
                  <p>{{ item.see_num }}万</p>
                </div>
              </div>
            </div>
          </div>
          <div class="author-box-row" :style="{ height: '252px' }">
            <div class="author-two-top">
              <h2>大家还喜欢听</h2>
              <p>更多></p>
            </div>
            <div class="author-row1-alive">
              <div class="author-row1-alive-dong">
                <div
                  class="author-some-book"
                  v-for="(item, index) in goodBook"
                  :key="index"
                >
                  <img :src="item.book_img_url" alt="" />
                  <h4>{{ item.bookname }}</h4>
                  <p>{{ item.see_num }}万</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tubooktitle">
            <h3>图书信息</h3>
            <div>
              <p>章数：246集</p>
              <p>字数：138.9万字</p>
              <p>上架时间：2018 05 07</p>
              <p>免责声明：本书由“XXX”提供，并授权给掌上听书</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Alert v-if="alertFlag" :transition="transition" class="alert">
      <component :is="components"></component>
    </Alert>
        <div class="botom_box">
              <van-popup v-model="show" round position="bottom" :style="{ height: '60%' }">
                    <BottomZhu @show="show"/>
              </van-popup>

        </div>
  </div>
</template>

<script>
// import collect from "./collect.vue";
import Alert from "../alert/alert.vue";
import { alert_parent } from "../alert/alert_mixin.js";
// import a from './a'; // 引入组件
import pinglun from "./pinglun.vue";
import simile from "./simile.vue";
// import dibuList from './dibuList'
import { Toast } from 'vant';
import BottomZhu from './bottZhu'

export default {
  name: "all",
  mixins: [alert_parent],
  data() {
    return {
      msg: "测试",
      musicTop: ["音频", "评论", "相似"],
      active: 0,
      activeName: "second",
      musicIndex: 0,
      fangFlag: false,
      audioSeek: 0,
      audioDuration: 0,
      showTime1: "00:00",
      showTime2: "00:00",
      audioTime: 0,
      allTime: 0,
      startX: 0,
      endX: 0,
      touFlag: false,
      chax: 0,
      durationes: 0,
      jindu: 0,
      goodBook: [],
      navFlgae: false,
      stFlag: this.$store.state.bags.scFlag,
      components: "",
      transition: {
        to: "",
        from: "",
      },
      scnum: "",
      show: false,
      musicIndex: 0,
      // objes:(JSON.parse(localStorage.getItem("times")).bookid===this.$store.state.bags.bookItem.bookid && this.$store.state.bags.bookCatalog[this.musicIndex].diversityname === JSON.parse(localStorage.getItem('times')).diversity)?parseInt(JSON.parse(localStorage.getItem('times')).time):0,
      objes:localStorage.getItem('time'),
      timeFlag:true 
    };
  },
  components: {
    Alert,
    pinglun,
    simile,
    BottomZhu
    // dibuList
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() { 

         this.musicIndex = this.$store.state.bags.musicIndex
         this.$store.dispatch('homes/getDataChange','畅销书').then(res=>{
            //  console.log(res.info)
             this.goodBook = res.info 
        })
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.bingxu);
    console.log(this.objes);
    console.log(this. $store.state.bags.bookCatalog[this.musicIndex].diversityname)
    console.log(this.$store.state.bags.bookItem.bookid);
    console.log(JSON.parse(localStorage.getItem('times')));
              if (sessionStorage.getItem("userId")) {
                  let writer = this.$store.state.bags.bookItem.writer;
                  let user=this.$store.state.login.loginuserMsg.guanzhu.prople
                  user.forEach(item=>{
                    if (item.userid===writer) {
                      this.$refs.contact.style.display="none"
                      this.$refs.nocontact.style.display="block"
                    }
                  })
                }
      
                let scIndex= this.$store.state.bags.scsumData.some(item=>{
                    // console.log(item)
                    // console.log(this.musicIndex+1,'index')
                    return item.sum === this.musicIndex+1 && item.bookid===this.$store.state.bags.bookItem.bookid&&item.userid===sessionStorage.getItem("userId")
                })
                this.scnum = scIndex
              //  console.log(this.stFlag,'状态')
             
              // this.$refs['music'].play()
              // this.fangFlag=true
                 let musicSrc = this.$store.state.bags.bookCatalog[this.musicIndex].book_text_url
               localStorage.setItem("musicSrc",musicSrc)
  },
  beforeDestroy(){
    let obj = {
      time:this.audioSeek,
      diversity: this.$store.state.bags.bookCatalog[this.musicIndex].diversityname,
      bookid:this.$store.state.bags.bookItem.bookid
    }
        localStorage.setItem("time",this.audioSeek)
        localStorage.setItem("times",JSON.stringify(obj))

        clearInterval(this.timmer)
       
  },
  // Vue方法定义
  // Vue方法定义
  methods: {
    // 关注
    guanzhu() {
      if (sessionStorage.getItem("userId")) {
        let writer = this.$store.state.bags.bookItem.writer;
        this.$store
          .dispatch("bags/contact", {
            fromId: sessionStorage.getItem("userId"),
            toId: writer,
          })
          .then((res) => {
            if (res.code === 200) {
              console.log(res);
              this.$refs.nocontact.style.display = "block";
              this.$refs.contact.style.display = "none";
            }
          });
      } else {
        this.$router.history.push({
          path: "/login",
          query: {
            path: this.$route.path,
          },
        });
      }
    },
    // 取关
    noguanzhu() {
      let writer = this.$store.state.bags.bookItem.writer;
      this.$store
        .dispatch("bags/delContact", {
          fromId: sessionStorage.getItem("userId"),
          toId: writer,
        })
        .then((res) => {
          if (res.code === 200) {
            this.$refs.nocontact.style.display = "none";
            this.$refs.contact.style.display = "block";
          }
        });
    },
    fan() {
      this.$router.history.go(-1);
    },
    bof() {
      this.fangFlag = !this.fangFlag
      if (this.fangFlag) {
        // this.fangFlag = true;
        this.$refs["music"].play();
      } 
      if (!this.fangFlag) {
        this.$refs["music"].pause();
      }
      // console.log(this.fangFlag)
    }, //播放的时候
    bofang(e) {
      this.timmer = setInterval(() => {
        if(this.startX){
              e.target.currentTime = this.audioSeek;
        }
        if(localStorage.getItem("time")&&this.timeFlag&&JSON.parse(localStorage.getItem("times")).bookid===this.$store.state.bags.bookItem.bookid&&JSON.parse(localStorage.getItem("times")).diversity===this. $store.state.bags.bookCatalog[this.musicIndex].diversityname){
          e.target.currentTime = this.objes
          let seek = this.objes
          this.getTimes(seek+1)
        }else{
            //一个初始值0
            let seek = this.audioSeek;
            //当歌曲播放是 每隔一秒歌曲播放时间+1 并计算分钟与秒数
            this.getTimes(seek + 1);
        }
       
        //当拉动了进度条时 获取当前的时间为拉动之后的时间
        let fenbi = this.$refs["tiao"].offsetWidth - this.$refs['dong'].offsetWidth
        //进度条走动的距离
        this.$refs["dong"].style.left = `${(e.target.currentTime / e.target.duration) * fenbi}px`;
        this.$refs["tiaodong"].style.width= `${(e.target.currentTime / e.target.duration) * fenbi}px`;
      }, 1000);
     
       let data = new Date()
        this.$store.dispatch('bags/gethistory',{time:data.getTime(),type:'add',userid:sessionStorage.getItem('userId'),bookid:this.$store.state.bags.bookCatalog[this.musicIndex].bookid,diversity:this.musicIndex+1,diversityid:this.$store.state.bags.bookCatalog[this.musicIndex].diversityid}).then(ress=>{
                // console.log(ress)
            this.$store.dispatch("login/getUser",{userid:sessionStorage.getItem("userId")})
        })
      
        
    }, //暂停的时候
    zanting() {
      clearInterval(this.timmer);
    }, //刚开始获取的总时间
    getAudio() {
      //获取总时长
           
      this.durationes = this.$refs["music"].duration;
      let min = parseInt(this.durationes / 60);
      let sec = parseInt(this.durationes % 60);
      if (min.toString().length == 1) {
        min = `0${min}`;
      }
      if (sec.toString().length == 1) {
        sec = `0${sec}`;
      }
      this.$refs["end"].innerHTML = `${min}:${sec}`;
      this.allTime = `${min}:${sec}`;
      //  console.log(this.objes)
       if(localStorage.getItem("time")&&this.timeFlag&&JSON.parse(localStorage.getItem("times")).bookid===this.$store.state.bags.bookItem.bookid&&JSON.parse(localStorage.getItem("times")).diversity===this. $store.state.bags.bookCatalog[this.musicIndex].diversityname){
          this.getTimes(+this.objes)
        //当拉动了进度条时 获取当前的时间为拉动之后的时间
        let fenbi = this.$refs["tiao"].offsetWidth - this.$refs['dong'].offsetWidth
        //进度条走动的距离
        this.$refs["dong"].style.left = `${(this.objes / this.durationes) * fenbi}px`;
        this.$refs["tiaodong"].style.width= `${(this.objes /this.durationes) * fenbi}px`;
       }else{
          this.$refs["dong"].innerHTML = this.showTime1;
          this.$refs["start"].innerHTML = this.showTime1;
       }
      
       
    }, //音乐结束的时候
    jieshu() {
      this.timeFlag = false 
      this.content(2);
    },
    startdong(e) {
      this.touFlag = true;
      let touch = e.touches[0];
      //开始坐标
      this.startX = 125.17647552490234;
      // this.startX = touch.pageX;
    },
    ladong(e) {
      if (this.touFlag) {
        let touchn = e.touches[0];
        //结束的坐标
        this.endX = touchn.pageX;
        this.chaX = this.endX - this.startX;
        let clientWidth = this.$refs["tiao"].offsetWidth - this.$refs['dong'].offsetWidth
        if (this.chaX >= clientWidth) {
          this.chaX = clientWidth;
        }
        if (this.chaX <= 0) {
          this.chaX = 0;
        }
  
        // console.log(this.chaX)
        this.$refs["dong"].style.left = `${this.chaX}px`;
        this.$refs["tiaodong"].style.width= `${this.chaX}px`;
        //百分比
        let dus = this.$refs["music"].duration * (this.chaX / clientWidth);
        this.getTimes(dus);
      }
    },
    enddong(e) {
      // this.bof()
    },
    getTimes(durationes) {
      let min = parseInt(durationes / 60);
      let sec = parseInt(durationes % 60);
      if (min.toString().length == 1) {
        min = `0${min}`;
      }
      if (sec.toString().length == 1) {
        sec = `0${sec}`;
      }
      // console.log( `${min}:${sec}`)
      this.$refs["dong"].innerHTML = `${min}:${sec}`;
      this.$refs["start"].innerHTML = `${min}:${sec}`;
      this.showTime1 = `${min}:${sec}`;
      
      this.audioSeek = durationes;
      if(localStorage.getItem("time")&&this.timeFlag&&JSON.parse(localStorage.getItem("times")).bookid===this.$store.state.bags.bookItem.bookid&&JSON.parse(localStorage.getItem("times")).diversity===this. $store.state.bags.bookCatalog[this.musicIndex].diversityname){
        this.objes = durationes
      }
    },
    provet() {
      this.content(1);
    },
    next() {
      this.content(2);
    }, //上一首下一首
    content(num) {
      if (num === 1) {
        this.musicIndex--;
        if (this.musicIndex <= 0) {
          this.musicIndex = 0;
        }
      } else if (num === 2) {
        this.musicIndex++;
        if (this.musicIndex >= this.$store.state.bags.bookCatalog.length) {
          this.musicIndex = this.$store.state.bags.bookCatalog.length-1;
        }
      }
      //audioSeek
      // console.log(this.audioSeek,'-------------')
      clearInterval(this.timmer)
      this.audioSeek = 0
      this.showTime1 = "00:00"
      this.$refs["dong"].style.left = `0px`;
      this.$refs["tiaodong"].style.width= `0px`;
      this.fangFlag = false 
      this.timeFlag = false 
      // this.bof();
      //判断里面收藏的集数
              // console.log(this.$store.state.bags.scsumData)
                let scIndex= this.$store.state.bags.scsumData.some(item=>{
                    // console.log(item)
                    // console.log(this.musicIndex+1,'index')
                    return item.sum === this.musicIndex+1 && item.bookid===this.$store.state.bags.bookItem.bookid&&item.userid===sessionStorage.getItem("userId")
                })
                this.scnum = scIndex
                // console.log(this.scnum)
                
    },
    xzn(e){
        //选择收藏的歌单
        if(!sessionStorage.getItem('token')){
             Toast('请先登录')
        }else{
            let type = ""
            
            this.scnum = !this.scnum
            //已收藏
            if(this.stFlag&&this.scnum){
                  Toast('可以在书包-收藏里查找自己喜欢的内容');
                  type = "add"
            }else{
                  Toast('已取消收藏');
                  type="del"

            }
            //存放每一个this.musicIndex 是每一章 为了区分是收藏的哪一章 还要区分一下收藏的是哪一本书  哪一个用户
            this.$store.dispatch('bags/getCollect',{type,userid:sessionStorage.getItem('userId'),bookid:this.$store.state.bags.bookCatalog[this.musicIndex].bookid,number:this.musicIndex+1})
            this.$store.commit('bags/getShouFlag',{stFlag:type,sum:this.musicIndex+1,bookid:this.$store.state.bags.bookItem.bookid,userid:sessionStorage.getItem("userId")})  
        }
           
           
    },showPopup(){
      this.show=true
      this.$store.commit('bags/setmusicIndex',this.musicIndex+1)
    }

  },
  onUnload: function () {
    //页面卸载
    
    clearInterval(this.timmer);
  },
};

</script>

<style>
/* @import url(''); 引入css类 */
@import url("../../../static/fonts/iconfont.css");

/* .tishi{
  width:100%;
  height:100vh;
  position: fixed;
  top:0;
  left:0;
}
.xiaohe{
  width:6.666667rem;
  height:.933333rem;
  background:rgb(0,0,0,0.5);
  position:absolute;
  top:50%;
  left:20%;
} */

.cataItem {
  display: flex;
  /* height: 68px; */
}
.cataItem > div:nth-child(1) {
  color: rgba(160, 160, 160, 100);
  font-size: 0.48rem;
  margin: 0 0.693333rem 0 0.533333rem;
  line-height: 1.813333rem;
  font-family: PingFangSC-regular;
}
.cataItemcont {
  padding-top: 0.266667rem;
  padding-bottom: 0.106667rem;
}
.cataItemcont > div:nth-child(1) {
  color: rgba(0, 0, 0, 1);
  font-size: 0.48rem;
  font-family: PingFangSC-regular;
}
.cataItemcont > div:nth-child(2) {
  color: rgba(116, 116, 116, 100);
  height: 0.48rem;
  margin-top: 0.08rem;
  font-size: 0.32rem;
  font-family: PingFangSC-regular;
}
.cataItemcont > div:nth-child(2) span {
  margin-left: 0.693333rem;
}
.cateItemR {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  width: calc(100vw - 56.562px);
}
.iconfont .icon-xin1 {
  color: red;
}
.iconfont .icon-xin {
  color: white;
}
.nocontact {
  display: none;
}

.music-boxes {
  width: 100%;
  height: 100%;
}
.alert {
  width: 100%;
}
.music-box {
  width: 100%;
  background: #6c8c93 100%;
  height: 100%;
  overflow: auto;
}

.music-main {
  width: 100%;
  height: auto;
  padding-bottom: 11.2rem;
  position: relative;
  top: 1.7rem;
}
.music-main-img {
  width: 7.333333rem;
  margin: 0.4rem auto;
}

.music-main-img img {
  width: 7.333333rem;
  height: 6.4rem;
  border-radius: 0.16rem;
}
.music-main-img h3 {
  font-size: 0.533333rem;
}
.music-main-img h6 {
  font-size: 0.426667rem;
}
.music-main-img h3,
.music-main-img h6 {
  height: 0.853333rem;
  line-height: 0.853333rem;
  width: 100%;
  color: white;
  text-align: left;
  font-family: PingFangSC-regular;
}
.music-main-xuan {
  width: 100%;
  height: 1.013333rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.music-main-xuan p {
  font-size: 0.666667rem;
  color: white;
}
.music-jindu {
  width: 100%;
  height: 1.013333rem;
  display: flex;
  align-items: center;
  margin-top: 0.533333rem;
  padding: 0 0.266667rem;
}
.music-row {
  width: 100%;
  height: 0.426667rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.266667rem;
}
.row-alive {
  width: 7.013333rem;
  position: relative;
  animation: all 0.5s ease-in-out;
}
.tiao {
  width: 7.013333rem;
  height: 0.026667rem;
  background: rgb(196, 195, 195);
}
.tiaodong{
  width:0;
  height: 0.026667rem;
  background:white;
   position: absolute;
  left: 0;
  bottom:0;
}
.music-time {
  width: 1.2rem;
  height: 0.4rem;
  line-height: 0.4rem;
  border-radius: 0.133333rem;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -0.133333rem;
  color: black;
  background: white;
}

.music-add-peomise {
  width: 100%;
  height: 3.44rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
}
.music-add-peomise p {
  font-size: 0.666667rem;
}
.music-add-peomise p:nth-child(2) {
  transform: rotate(180deg);
}
.music-add-peomise p:nth-child(3) {
  font-size: 1.333333rem;
  color: white;
}
.music-add-peomise p:last-child {
  font-size: 0.266667rem;
}
.lastping {
  width: auto;
  height: 0.4rem;
  line-height: 0.4rem;
  border-radius: 0.106667rem;
  border: 1px solid white;
  color: white;
  font-size: 0.24rem;
  padding: 0 0.08rem;
}

.author-box {
  width: 90%;
  margin-left: 5%;
}
.author-box-row {
  width: 100%;
  height: 11.2rem;
  line-height: 0.533333rem;
  border-radius: 0.213333rem;
  background: #91a8ad;
  text-align: center;
  margin-top: 0.533333rem;
}
.author-row-top {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  margin-top: 0.613333rem;
  float: left;
}
.author-row-top-img img {
  width: 1.653333rem;
  height: 1.653333rem;
  border-radius: 50%;
}
.author-row-top h3 {
  width: 2.666667rem;
  height: 0.746667rem;
  color: rgba(255, 255, 255, 100);
  font-size: 0.533333rem;
  text-align: left;
  font-family: PingFangSC-regular;
}
.author-row-top button {
  width: 1.706667rem;
  height: 0.746667rem;
  line-height: 0.533333rem;
  border-radius: 0.72rem;
  background-color: rgba(237, 69, 108, 100);
  text-align: center;
  outline: none;
  border: none;
}
.row-flex-xin {
  width: 100%;
  height: 2.906667rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  font-family: PingFangSC-regular;
  font-size: 0.346667rem;
  padding: 0.266667rem 0;
  color: rgba(255, 255, 255, 68);
}
.row-flex-xin li p:nth-child(1) {
  font-size: 0.533333rem;
}

.author-row1-alive {
  width: 100%;
  height: auto;
  overflow-x: auto;
  color: white;
}
.author-row1-alive-dong {
  width: 120vw;
  height: 5.013333rem;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  text-align: left;
}
.author-some-book {
  width: 2.693333rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.author-some-book img {
  width: 2.22rem;
  height: 3.226667rem;
  border-radius: 5%;
  /* margin-left:calc(calc(2.7rem - 2.22rem)/2); */
}
.author-some-book h4,
.some-book p {
  width: 100%;
  text-align: left;
  padding: 0 0.133333rem;
}
.author-two-top {
  width: 100%;
  height: 0.933333rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  margin-top: 0.613333rem;
  float: left;
  padding: 0 0.266667rem;
}
.author-box > div:nth-child(2) {
  padding-bottom: 9.333333rem;
}

.tubooktitle {
  width: 100%;
  height: 4.586667rem;
  border-radius: 0.213333rem;
  background: #91a8ad;
  padding: 0 0.4rem;
  color: rgba(255, 255, 255, 100);
  margin-top: 0.586667rem;
}
.tubooktitle h3 {
  width: 2.053333rem;
  height: 0.72rem;
  font-size: 0.506667rem;
  text-align: left;
  font-family: PingFangSC-regular;
  padding: 0.266667rem 0;
}
.tubooktitle div {
  width: 6.586667rem;
  height: 2.506667rem;
  margin-top: 0.4rem;
  font-size: 0.293333rem;
  text-align: left;
  font-family: PingFangSC-regular;
}
</style>
